<template>
  <div class="login-container">
    <!-- 返回箭头 -->

    <van-icon name="arrow-left" @click="goBack" class="back-icon" />
    <!-- 登录标题 -->
    <div class="login-title">创建您的</div>
    <div class="login-title">帐户</div>
    <!-- 电子邮件输入框 -->
    <van-field
      v-model="email"
      type="email"
      label="电子邮件"
      left-icon="https://cdn7.axureshop.com/demo2024/2291321/images/7_%E6%B3%A8%E5%86%8C/u407.svg"
      placeholder="请输入电子邮件"
    />
    <!-- 密码输入框 -->
    <van-field
      v-model="password"
      type="password"
      label="密码"
      left-icon="lock"
      right-icon="eye"
      placeholder="请输入密码"
      @click-right-icon="togglePasswordVisible"
    />
    <!-- 登录按钮 -->
    <van-button type="primary" round block @click="login" style="background-color: #ebad18;top: 20px">注册</van-button>
    <!-- 或 -->
    <div class="or">或</div>
    <!-- 第三方登录图标 -->
    <div class="third-party-login">
      <van-icon name="wechat" color="#1aad19"  @click="wechatLogin" size="30px"/>
      <van-icon name="alipay" color="#00a3ee" @click="alipayLogin"  size="30px"/>
      <van-icon name="phone" color="#1890ff" @click="phoneLogin"  size="30px"/>
    </div>
    <!-- 注册链接 -->
    <div class="register">
      已经有帐户？<span @click="goRegister">登录</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {Toast} from "vant";
import { useRouter } from 'vue-router';
import axios from "axios";
const router = useRouter();

// 控制密码是否可见
const passwordVisible = ref(false);
// 电子邮件
const email = ref('');
// 密码
const password = ref('');
//验证码
const code = ref('');

// 切换密码可见性
const togglePasswordVisible = () => {
  passwordVisible.value =!passwordVisible.value;
};

// 登录函数（这里只是模拟，实际需要与后端交互）
const login = () => {
  console.log('注册', email.value, password.value);
  axios.post('http://localhost:8000/login/emailrgs/', {'email':email.value,'password':password.value}).then((res) => {
    //token
    localStorage.setItem('token', res.data.token);
    localStorage.setItem('uid', res.data.uid);
    if (res.data.code === 201) {
      alert('注册成功');
      router.push('/myone');
    } else {
    }
  })

};

// 发送验证码，这里只是模拟，实际需要跳转到相应页面）
//const forgetPassword = () => {
//  console.log('发送验证码');
//  axios.post('http://localhost:8000/login/sendcode/', {'phone':"17555801915"}).then((res) => {
//    //token
//    if (res.data.code === 200) {
//      alert('发送成功');
//    } else {
//      alert('失败')
//    }
//  })
//};

// 返回上一页函数（这里只是模拟，实际需要根据路由情况处理）
const goBack = () => history.back();

// 前往注册页面函数（这里只是模拟，实际需要跳转到注册页面）
const goRegister = () => {
  console.log('前往登录');
  router.push('/login');
};

 // 模拟微信登录
const wechatLogin = () => {
  Toast('微信登录功能暂未实现');
}

// 模拟支付宝登录
const alipayLogin = () => {
  Toast('支付宝登录功能暂未实现');
}

// 模拟手机号登录
const phoneLogin = () => {
  Toast('手机号登录功能暂未实现');
}
</script>

<style scoped>
.login-container {
  padding: 20px;
}

.back-icon {
  font-size: 24px;
  margin-bottom: 20px;
}

.login-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.remember-account {
  margin-bottom: 20px;
}

.forget-password {
  text-align: center;
  color: #ff9900;
  margin-bottom: 30px;
}

.or {
  text-align: center;
  margin-bottom: 20px;
}

.third-party-login {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.register {
  text-align: center;
}

.register span {
  color: #ff9900;
  cursor: pointer;
}
</style>